{% extends 'home/index.html'%}
{% block title %}
<title>订单确认</title>
{% endblock %}

{% block css %}

<link href="/static/home/css/cartstyle.css" rel="stylesheet" type="text/css" />

<link href="/static/home/css/jsstyle.css" rel="stylesheet" type="text/css" />

{% endblock %}

{% block js %}
<script type="text/javascript" src="/static/home/js/address.js"></script>
{% endblock %}

{% block con %}
<div class="concent">
    <!--地址 -->
    <div class="paycont">
        <div class="address">
            <h3>
                确认收货地址
            </h3>
            <div class="control">
                <div class="tc-btn createAddr theme-login am-btn am-btn-danger">
                    使用新地址
                </div>
            </div>
            <div class="clear">
            </div>
            <li class="user-addresslist" style="display: none">
                <div class="address-left">
                    <div class="user DefaultAddr">
                        <span class="buy-address-detail">
                            <span class="buy-user">
                                艾迪
                            </span>
                            <span class="buy-phone">
                                15871145629
                            </span>
                        </span>
                    </div>
                    <div class="default-address DefaultAddr">
                        <span class="buy-line-title buy-line-title-type">
                            收货地址：
                        </span>
                        <span class="buy--address-detail">
                            <span class="province">
                                湖北
                            </span>
                            <span class="city">
                                武汉
                            </span>
                            <span class="dist">
                                武昌
                            </span>
                            <span class="street">
                                东湖路75号众环大厦2栋9层902
                            </span>
                        </span>
                    </div>
                    <ins class="deftip hidden">
                        默认地址
                    </ins>
                </div>
                <div class="address-right">
                    <span class="am-icon-angle-right am-icon-lg">
                    </span>
                </div>
                <div class="clear">
                </div>
                <div class="new-addr-btn">
                    <a href="javascript:void(0)" class="rm">
                        设为默认
                    </a>
                    <span class="new-addr-bar rm">
                        |
                    </span>
               
                    <a href="javascript:void(0);" class="bianji">
                        编辑
                        
                    </a>
                    
                    <span class="new-addr-bar">
                        |
                    </span>
                    <a href="javascript:void(0);" id="del" ">
                        删除
                    </a>
                </div>
            </li>
            <ul class="AddressAll">
       

            </ul>
            <div class="clear">
            </div>
        </div>
        <!--物流 -->
        <div class="logistics">
            <h3>
                选择物流方式
            </h3>
            <ul class="op_express_delivery_hot wuliulist">
                <li data-value="yuantong" class="OP_LOG_BTN  ">
                    <i class="c-gap-right" style="background-position:0px -468px">
                    </i>
                    圆通
                    <span>
                    </span>
                </li>
                <li data-value="shentong" class="OP_LOG_BTN  ">
                    <i class="c-gap-right" style="background-position:0px -1008px">
                    </i>
                    申通
                    <span>
                    </span>
                </li>
                <li data-value="yunda" class="OP_LOG_BTN  ">
                    <i class="c-gap-right" style="background-position:0px -576px">
                    </i>
                    韵达
                    <span>
                    </span>
                </li>
                <li data-value="zhongtong" class="OP_LOG_BTN op_express_delivery_hot_last ">
                    <i class="c-gap-right" style="background-position:0px -324px">
                    </i>
                    中通
                    <span>
                    </span>
                </li>
                <li data-value="shunfeng" class="OP_LOG_BTN  op_express_delivery_hot_bottom">
                    <i class="c-gap-right" style="background-position:0px -180px">
                    </i>
                    顺丰
                    <span>
                    </span>
                </li>
            </ul>
        </div>
        <div class="clear">
        </div>
        <!--支付方式-->
        <div class="logistics">
            <h3>
                选择支付方式
            </h3>
            <ul class="pay-list">
                <li class="pay card" data-value="yinlian">
                    <img src="/static/home/images/wangyin.jpg">
                    银联
                    <span>
                    </span>
                </li>
                <li class="pay qq" data-value="weixin">
                    <img src="/static/home/images/weizhifu.jpg">
                    微信
                    <span>
                    </span>
                </li>
                <li class="pay taobao" data-value="zhifubao">
                    <img src="/static/home/images/zhifubao.jpg">
                    支付宝
                    <span>
                    </span>
                </li>
            </ul>
        </div>
        <div class="clear">
        </div>
        <!--订单 -->
        <div class="concent">
            <div id="payTable">
                <h3>
                    确认订单信息
                </h3>
                <div class="cart-table-th">
                    <div class="wp">
                        <div class="th th-item">
                            <div class="td-inner">
                                商品信息
                            </div>
                        </div>
                        <div class="th th-price">
                            <div class="td-inner">
                                单价
                            </div>
                        </div>
                        <div class="th th-amount">
                            <div class="td-inner">
                                数量
                            </div>
                        </div>
                        <div class="th th-sum">
                            <div class="td-inner">
                                金额
                            </div>
                        </div>
                        <div class="th th-oplist">
                            <div class="td-inner">
                                配送方式
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clear">
                </div>
                {% for i in data %}
                <div class="bundle  bundle-last">
                    <div class="bundle-main">
                        <ul class="item-content clearfix">
                            <div class="pay-phone">
                                <li class="td td-item">
                                    <div class="item-pic">
                                        <a href="#" class="J_MakePoint">
                                            <img src="{{ i.goodsid.pic_url }}" class="itempic J_ItemImg" width="80" height="80">
                                        </a>
                                    </div>
                                    <div class="item-info">
                                        <div class="item-basic-info">
                                            <a href="#" class="item-title J_MakePoint" data-point="tbcart.8.11">
                                               {{ i.goodsid.title }}
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="td td-info">
                                   
                                </li>
                                <li class="td td-price">
                                    <div class="item-price price-promo-promo">
                                        <div class="price-content">
                                            <em class="J_Price price-now">
                                                {{ i.goodsid.price }}
                                            </em>
                                        </div>
                                    </div>
                                </li>
                            </div>
                            <li class="td td-amount">
                                <div class="amount-wrapper ">
                                    <div class="item-amount ">
                                        <span class="phone-title">
                                            购买数量
                                        </span>
                                        <div class="sl">
                                            <input class="text_box" readonly type="text" value="{{ i.num }}" style="width:30px;">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="td td-sum">
                                <div class="td-inner">
                                    <em tabindex="0" class="J_ItemSum number">
                                        {% load pagetag %}
                                        {% cartmoney i.num i.goodsid.price %}
                                    </em>
                                </div>
                            </li>
                            <li class="td td-oplist">
                                <div class="td-inner">
                                    <span class="phone-title">
                                        配送方式
                                    </span>
                                    <div class="pay-logis">
                                      全场包邮
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="clear">
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </div>
                {% endfor %}
                <div class="clear">
                </div>
                <form action="{% url 'home_ordercreate' %}" method="post">
                <div class="pay-total">
                    <!--留言-->
                    <div class="order-extra">
                        <div class="order-user-info">
                            <div id="holyshit257" class="memo">
                                <label>
                                    买家留言：
                                </label>
                                <input type="text" title="选填,对本次交易的说明（建议填写已经和卖家达成一致的说明）" placeholder="选填,建议填写和卖家达成一致的说明"
                                class="memo-input J_MakePoint c2c-text-default memo-close">
                                <div class="msg hidden J-msg">
                                    <p class="error">
                                        最多输入500个字符
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--优惠券 -->
                  
                    <div class="clear">
                    </div>
                </div>
                <!--含运费小计 -->
                <div class="buy-point-discharge ">
                    <p class="price g_price ">
                        合计（含运费）
                        <span>
                            ¥
                        </span>
                        <em class="pay-sum">
                            244.00
                        </em>
                    </p>
                </div>
                <!--信息 -->
                <div class="order-go clearfix">
                    <div class="pay-confirm clearfix">
                        <div class="box">
                            <div tabindex="0" id="holyshit267" class="realPay">
                                <em class="t">
                                    实付款：
                                </em>
                                <span class="price g_price ">
                                    <span>
                                        ¥
                                    </span>
                                    <em class="style-large-bold-red " id="J_ActualFee">
                                        244.00
                                    </em>
                                </span>
                            </div>
                            <div id="holyshit268" class="pay-address">
                                <p class="buy-footer-address">
                                    <span class="buy-line-title buy-line-title-type">
                                        寄送至：
                                    </span>
                                    <span class="buy--address-detail">
                                        <span class="province">
                                            湖北
                                        </span>
                                        <span class="city">
                                            武汉
                                        </span>
                                        <span class="dist">
                                            洪山
                                        </span>
                                        <span class="street">
                                            雄楚大道666号(中南财经政法大学)
                                        </span>
                                    </span>
                                </p>
                                <p class="buy-footer-address">
                                    <span class="buy-line-title">
                                        收货人：
                                    </span>
                                    <span class="buy-address-detail">
                                        <span class="buy-user">
                                            艾迪
                                        </span>
                                        <span class="buy-phone">
                                            15871145629
                                        </span>
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div id="holyshit269" class="submitOrder">
                            <div class="go-btn-wrap">
                                {% csrf_token %}
                                <input type="hidden" name="addressid" value="">
                                <input type="hidden" name="wuliu" value="">
                                <input type="hidden" name="buytype" value="">
                                <input type="hidden" name="cartids" value="{{ request.GET.cartids }}">

                                <a id="J_Go" href="javascript:void(0)" class="btn-go" tabindex="0" title="点击此按钮，提交订单">
                                    提交订单
                                </a>
                            </div>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                </div>
            </form>
            </div>
            <div class="clear">
            </div>
        </div>
    </div>
    <div class="theme-popover-mask">
    </div>
    <div class="theme-popover" style="height: 500px;">
        <!--标题 -->
        <div class="am-cf am-padding">
            <div class="am-fl am-cf">
                <strong class="am-text-danger am-text-lg">
                    新增地址
                </strong>
                /
                <small>
                    Add address
                </small>
            </div>
        </div>
        <hr/>
        <div class="am-u-md-12">
            <form class="am-form am-form-horizontal">
                <div class="am-form-group">
                    <label for="user-name" class="am-form-label">
                        收货人
                    </label>
                    <div class="am-form-content">
                        <input type="text" id="user-name" placeholder="收货人">
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-phone" class="am-form-label">
                        手机号码
                    </label>
                    <div class="am-form-content">
                        <input id="user-phone" placeholder="手机号必填" type="email">
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-phone" class="am-form-label">
                        所在地
                    </label>
                    <div class="am-form-content address">
                        <select name="sheng">
                            {% for i in citys %}
                            <option value="{{ i.id }}">{{ i.name }}</option>>
                            {% endfor %}
                        </select>

                        <select name="shi">
                            <option>--请选择--</option>
                        </select>
                        <select name="xian">
                            <option>--请选择--</option>
                        </select>
                       
                        
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-intro" class="am-form-label">
                        详细地址
                    </label>
                    <div class="am-form-content">
                        <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                        <small>
                            100字以内写出你的详细地址...
                        </small>
                    </div>
                </div>
                <div class="am-form-group theme-poptit">
                    <div class="am-u-sm-9 am-u-sm-push-3">
                        <div class="am-btn am-btn-danger" id="addressadd">
                            保存
                        </div>
                        <div class="am-btn am-btn-danger close" id="addressclose">
                            取消
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="clear">
    </div>



    <!-- 编辑收货地址 -->
     <div  id='bianji' style="height: 500px;width:500px;background: #ccc;position: absolute;top:40px;left:400px;z-index: 4;display: none" >
        <!--标题 -->
        <div class="am-cf am-padding">
            <div class="am-fl am-cf">
                <strong class="am-text-danger am-text-lg">
                    编辑地址
                </strong>
                /
                <small>
                    Edit address
                </small>
            </div>
        </div>
        <hr/>
        <div class="am-u-md-12">
            <form class="am-form am-form-horizontal">
                <div class="am-form-group">
                    <label for="user-name" class="am-form-label">
                        收货人
                    </label>
                    <div class="am-form-content">
                        <input type="text" id="user-name" placeholder="收货人">
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-phone" class="am-form-label">
                        手机号码
                    </label>
                    <div class="am-form-content">
                        <input id="user-phone" placeholder="手机号必填" type="email">
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-phone" class="am-form-label">
                        所在地
                    </label>
                    <div class="am-form-content address">
                        <select name="sheng" >
                            {% for i in citys %}
                            <option value="{{ i.id }}" id='sheng'>{{ i.name }}</option>>
                            {% endfor %}
                        </select>

                        <select name="shi" >
                            <option id='shi'>--请选择--</option>
                        </select>
                        <select name="xian" >
                            <option id='xian'>--请选择--</option>
                        </select>
                       
                        
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-intro" class="am-form-label">
                        详细地址
                    </label>
                    <div class="am-form-content">
                        <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                        <small>
                            100字以内写出你的详细地址...
                        </small>
                    </div>
                </div>
                <div class="am-form-group theme-poptit">
                    <div class="am-u-sm-9 am-u-sm-push-3">
                        <div class="am-btn am-btn-danger" id='baocun'>
                            保存
                        </div>
                        <div class="am-btn am-btn-danger close" id='quxiao'>
                            取消
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

<script type="text/javascript">

    // 表单提交事件，因为a链接不能提交表单
    $('#J_Go').click(function(){

        // 判断表单内容是否为空　
        // 提示选择收货地址
        if(!$(this).parents('form').find('input[name=addressid]').val()){
            alert('请选择收货地址！');
            return;
        }
        // 提示选择物流方式
        if(!$(this).parents('form').find('input[name=wuliu]').val()){
            alert('请选择物流地址！');
            return;
        }
        if(!$(this).parents('form').find('input[name=buytype]').val()){
            alert('请选择支付方式！');
            return;
        }
        // 获取表单，进行提交
        $(this).parents('form').submit()
    })

    // 选择支付方式
    $('.pay-list li').click(function(){
        $('input[name=buytype]').val($(this).attr('data-value')) 
    })

    // 选择物流方式
    $('.wuliulist li').click(function(){
        $('input[name=wuliu]').val($(this).attr('data-value')) 
    })

    // 地址选择的单击事件
    $('.AddressAll li').live('click',function(){
        // 给单击的收货地址添加class 
        $(this).addClass('defaultAddr').siblings().removeClass('defaultAddr')
        // 获取提交订单的收货地址信息
        $('#holyshit268').find('.province').text($(this).find('.province').text())
        $('#holyshit268').find('.city').text($(this).find('.city').text())
        $('#holyshit268').find('.dist').text($(this).find('.dist').text())
        $('#holyshit268').find('.street').text($(this).find('.street').text())
        $('#holyshit268').find('.buy-user').text($(this).find('.buy-user').text())
        $('#holyshit268').find('.buy-phone').text($(this).find('.buy-phone').text())
        $('input[name=addressid]').val($(this).attr('aid'))

    })


    //  定义一个函数，计算商品的实付款 
    function Totalprice(){
          var price = 0
            $('.J_ItemSum').each(function(){
                price += Number($(this).text())
            })
            $('#J_ActualFee').text(price.toFixed(2))
            $('.pay-sum').text(price.toFixed(2))
    }

    Totalprice()

    // 获取页面中的下拉框，绑定change事件
    $('.address select').click(function(){
        // 获取当前选中元素的id
        var id = $(this).val()

        // 此时发送ajax请求，获取下一级的数据
        $.get('{% url "home_getcitys" %}',{'id':id},function(data){
            // 如果返回的数据为空，就不执行下面的语句
            if(data.length==0){
                return ;
            }
            // 判断级别　如果是二级，就是市级
            if(data[0].level == 2){
                var sel = $('.address select[name=shi]')
                // 如果是三级，就是县级
            }else if(data[0].level == 3){
                var sel = $('.address select[name=xian')
            }else{
                return;
            }

            // 定义一个空的字符串，拼接option
            var ops = ''
            // 遍历获取的结果，拼接成option选项
            for(var i=0;i<data.length;i++){
                ops += '<option value="'+data[i]['id']+'">'+data[i].name+'</option>'
            }
            // 然后把拼接好的选项加入到下拉框中
            sel.html(ops)
        },'json')
    })

    // 用户添加新地址,地址存好就可以存入数据库
    $('#addressadd').click(function(){
        var addrs = {}
        addrs.shouhuoren = $('#user-name').val()
        addrs.shouhuophone = $('#user-phone').val()
        addrs.sheng = $('select[name=sheng]').val()
        addrs.shi = $('select[name=shi]').val()
        addrs.xian = $('select[name=xian]').val()
        addrs.info = $('#user-intro').val()

        // 发送ajax请求，向数据库存地址
        $.get('{% url 'home_addressadd' %}',addrs,function(data){
            // 自动触发取消单击事件
            $('#addressclose').trigger('click')
            alert(data.msg)

        },'json')
        getUserAlladdress()
    })

    // 删除收货地址
    $('#del').live('click',function(){
        // console.log('lalala')
        // 获取当前地址的id
        var aid = $(this).parents('li').attr('aid')
        d = $(this)
        // 发送ajax请求
        $.get('{% url 'home_addressdel' %}',{'aid':aid},function(data){
            if (data['error']==0){
                d.parents('li').remove()
            }

        },'json')
    })


    // 设为默认 单击事件
    $('.rm').live('click',function(){
        // 获取当前地址的id
        var aid = $(this).parents('li').attr('aid')
        // console.log(aid)
        // 发送ajax请求
        $.get('{% url 'home_addressdefault' %}',{'aid':aid},function(){
            getUserAlladdress()

        },'json')
    })


    // 编辑收货地址 
    $('.bianji').live('click',function(){
        // 获取当前地址的id
        var aid = $(this).parents('li').attr('aid')
        // console.log(aid)
        $('#bianji').show()

         // 发送ajax请求
        $.get('{% url 'home_addressedit' %}',{'aid':aid},function(data){
            
            // console.log(data.data1,typeof(data))
            if(data['error'] == 0){
                // 显示编辑的收货信息
                $('#bianji').find('#user-name').val(data.data1.shouhuoren)
                $('#bianji').find('#user-phone').val(data.data1.shouhuophone)
                $('#sheng').text(data.data1.sheng)
                $('#shi').text(data.data1.shi)
                $('#xian').text(data.data1.xian)
                $('#bianji').find('#user-intro').val(data.data1.info)
                $('#bianji').attr('aid',data.data1.id)
            }
            

        },'json')
    })


    // 用户编辑地址,存入数据库
    $('#baocun').click(function(){
        var addrs = {}
        addrs.shouhuoren = $('#bianji #user-name').val()
        addrs.shouhuophone = $('#bianji #user-phone').val()
        addrs.sheng = $('#bianji select[name=sheng]').val()
        addrs.shi = $('#bianji select[name=shi]').val()
        addrs.xian = $('#bianji select[name=xian]').val()
        addrs.info = $('#bianji #user-intro').val()
        addrs.aid = $('#bianji').attr('aid')

        var b = $(this)

        // 发送ajax请求，向数据库存地址
        $.get('{% url 'home_addresseditsave' %}',addrs,function(data){
            // 将编辑框隐藏
            b.parents('#bianji').hide()
            getUserAlladdress()

        },'json')

    })

    // 编辑框取消隐藏
    $('#quxiao').click(function(){
        $(this).parents('#bianji').hide()
    })

    getUserAlladdress()
    // 获取当前用户的所有收货地址
    function getUserAlladdress(){
        // 清空之前的数据，从数据库全部重新加载
        $('.AddressAll').empty()
        // 发送ajax请求，获取收货地址的数据
        $.get('{% url 'home_addressget' %}',function(data){
            // console.log(data,typeof(data))
            if(data.error == 0){
                // 将获得的数据赋值
                var arr = data.data1
                // 循环数据
                for (var i = 0;i<arr.length;i++){
                    // 将显示收货地址的li复制
                    var li = $('.address li').eq(0).clone()
                    // 判断当前是否为默认
                    if(arr[i].ischecked){

                        // 给该收货地址添加默认样式
                        li.addClass('defaultAddr')
                        // 创建元素
                        var el = $('<ins class="deftip">默认地址 </ins>')
                        // 将创建的元素添加到页面
                        li.append(el)
                        // 将设为默认删除
                        li.find('.rm').remove()

                        // 如果ischecked 为true
                        // 改默认地址就是提交订单地址的默认地址
                        $('#holyshit268').find('.province').text(arr[i].sheng)
                        $('#holyshit268').find('.city').text(arr[i].shi)
                        $('#holyshit268').find('.dist').text(arr[i].xian)
                        $('#holyshit268').find('.street').text(arr[i].info)
                        $('#holyshit268').find('.buy-user').text(arr[i].shouhuoren)
                        $('#holyshit268').find('.buy-phone').text(arr[i].shouhuophone)
                        $('input[name=addressid]').val(arr[i].id)

                    }
                    // 显示收货信息
                    li.find('.buy-user').text(arr[i].shouhuoren)
                    li.find('.buy-phone').text(arr[i].shouhuophone)
                    li.find('.province').text(arr[i].sheng)
                    li.find('.city').text(arr[i].shi)
                    li.find('.dist').text(arr[i].xian)
                    li.find('.street').text(arr[i].info)
                    li.attr('aid',arr[i].id)
                    // 让元素显示
                    li.show()
                    // 将li加入到ul中
                    $('.AddressAll').append(li)
                }
            }else{
                // 如果没有数据
                alert(data['msg'])
            }
        },'json')
    }

</script>

{% endblock %}